<template>
  <div>
    <div style="border-bottom:2px solid #888;line-height:26px;">
      <b>语法基本和用神相同</b><br/>
      <b>需要注意的是，如果支持 多表达式 与或运算，则需要 写方法名</b><br/>
      <b>比如 regex(xxxx)|| ik(yyyyy) && regex(zzzz) 必须每个单元都是 函数体</b><br/>
      <b>变量 上增加 五行属性的百分比 表达方式: p金 p木 p水 p火 p土  和五行权重值 金 木 水 火 土 做区分</b><br/>
    </div>
    <div style="border-bottom:1px solid #888;">
      工具栏：
      <el-button @click="handleBlRuleNew" type="text" style="margin-left:40px;" size="small">新建</el-button>
    </div>
    <div>
      <el-table :data="blRules">
        <el-table-column prop="mainExpression" label="主条件"></el-table-column>
        <el-table-column label="子条件列表">
          <template slot-scope="scope">
            <div v-for="sexp in scope.row.subExpressions">{{sexp}}</div>
          </template>
        </el-table-column>
        <el-table-column label="所属脏腑" prop="position"></el-table-column>
        <el-table-column label="病理值" prop="blValue"></el-table-column>
        <el-table-column label="病理表现" prop="mark"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small">删除</el-button>
            <el-button type="text" @click="handleEditBlRule(scope.row)" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="病理规则编辑" :visible.sync="blEditDialog">
      <el-form v-if="editingBlRule" label-position="top">
        <el-form-item label="主条件">
          <el-input v-model="editingBlRule.mainExpression" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="子条件">
          <el-row v-for="(sexp,index) in editingBlRule.subExpressions" :key="index">
            <el-col :span="18"><el-input v-model="editingBlRule.subExpressions[index]" size="mini"></el-input></el-col>
            <el-col :span="6"><el-button @click="handleSubRuleDel(index)" size="mini">删除</el-button></el-col>
          </el-row>
          <div>
            <el-button @click="handleSubRuleNew" type="primary" icon="el-icon-plus" circle size="mini"></el-button>
          </div>
        </el-form-item>
        <el-form-item label="所属脏腑">
          <el-input v-model="editingBlRule.position" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="病理值">
          <el-input v-model="editingBlRule.blValue" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="病理表现">
          <el-input v-model="editingBlRule.mark" size="mini"></el-input>
        </el-form-item>
        <el-form-item align="right">
          <el-button type="primary" @click="handleSaveRule">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'
  export default {
    name: "bl-data",
    data() {
      return {
        blEditDialog:false,
        blRules:[],
        editingBlRule:null,
      }
    },
    created(){
      this.listBlRules()
    },
    methods:{
      ...mapActions({fetch:'fetch'}),
      handleBlRuleNew(e){
        this.editingBlRule = {
          mainExpression:'',
          subExpressions:[],
          position:'',
          blValue:'',
          mark:''
        }
        this.blEditDialog = true
      },
      handleEditBlRule(row){
        this.editingBlRule = row
        this.blEditDialog=true
      },
      listBlRules(){
        this.fetch({
          name:'listBlRules'
        }).then(res=>{
          this.blRules = res
        }).catch(err=>{
          console.log(err)
          this.$message.error(err)
        })
      },
      handleSubRuleDel(index){
        this.editingBlRule.subExpressions.splice(index,1)
      },
      handleSubRuleNew(){
        this.editingBlRule.subExpressions.push("")
        console.log(this.editingBlRule)
      },
      handleSaveRule(e){
        let data = {
          mainExpression:this.editingBlRule.mainExpression,
          subExpressions:JSON.stringify(this.editingBlRule.subExpressions),
          position:this.editingBlRule.position,
          blValue:this.editingBlRule.blValue,
          mark:this.editingBlRule.mark
        }
        let api = 'addBlRules'
        if(this.editingBlRule.id){
          api = 'updateBlRules'
          data.id= this.editingBlRule.id
        }
        this.fetch({
          name:api,
          data
        }).then(res=>{
          if(!this.editingBlRule.id)
            this.blRules.push(res)
          this.blEditDialog = false
        }).catch(err=>{
          console.log(err)
          this.$message.error(err)
        })
      }
    }
  }
</script>

<style lang="scss">

</style>
